<template>
  <div class="scene-button">
    <!-- 提示框 -->
    <transition-group name="sceneTipsTs" tag="span">
      <div class="scene-tips" v-if="isPause == false && isTipShow == true">
        <span>{{ tip }}</span>
        <img src="../../../assets/img/tips-icon.png" alt="" class="scene-tips-icon">
      </div>
    </transition-group>

    <!-- 每日分配物资框 -->
    <pop-message v-if="progress == 'beforeGetAllocation'">
      <div class="allocation-main">
        <div class="main-title">新的一周</div>
        <div class="main-item">
          <div class="item-name">物资点</div>
          <div class="item-time">获得物资数量：{{ getAllocation + '份' }}</div>
          <div class="item-size">物资汇总：{{ material + '份' }}</div>
        </div>
        <div class="item-button" @click="before_get_allocation_button">关闭</div>
      </div>
    </pop-message>

    <!-- 结算物资分配框 -->
    <pop-message v-if="progress == 'beforeAllocation'">
      <div class="allocation-main">
        <div class="main-title">物资分配</div>
        <div class="main-item" v-for="item in redLevel" :key="item">
          <div class="item-name">{{ itemName(item.name) }}</div>
          <div class="item-time">持续时间：{{ item.time }}</div>
          <div class="item-size">所需物资：{{ item.size }}</div>
        </div>
        <div class="item-button" @click="next_allocation_button">开始结算</div>
      </div>
    </pop-message>

    <pop-message v-if="progress == 'nextAllocation'">
      <div class="allocation-main">
        <div class="main-title">物资结算</div>
        <div class="main-item">
          <div class="item-name">总消耗</div>
          <div class="item-time">所需物资：{{ allAllocation }}</div>
          <div class="item-size">结算剩余：{{ material + '份' }}</div>
        </div>
        <div class="item-button" @click="after_allocation_button">关闭</div>
      </div>
    </pop-message>

    <!-- 核酸检测结果框 -->
    <pop-message v-if="progress == 'afterTest' && isPause == false">
      <div class="test-main">
        <div class="main-title">核酸检测结果</div>
        <div class="main-item" v-for="item in redLevel" :key="item">
          <div class="item-name">{{ itemName(item.name) }}</div>
          <div class="item-time">持续时间：{{ item.time }}</div>
          <div class="item-size">检测结果：100% 阴性</div>
        </div>
        <div class="item-button" @click="after_Test_button">关闭</div>
      </div>
    </pop-message>

    <!-- 左下角按钮 -->
    <div class="scene-button-lb">
      <button @click="deploy_button" v-if="progress == 'beforeDeploy'">上报疫情</button>
      <button @click="click_button" v-if="progress == 'nowDeploy'">确认上报</button>
      <button @click="before_allocation_button" v-if="progress == 'afterDeploy' && isPause == false">查看物资情况</button>
      <button @click="start_test" v-if="progress == 'afterAllocation'">每日核酸检测</button>
      <button @click="end_day" v-if="progress == 'endDay'">结束一周</button>
    </div>

    <!-- 右下角按钮 -->
    <div class="scene-button-rb">
      <div class="rotate" @click="rotate_button" title="开启自动旋转">
        <div class="rotate-bg"></div>
        <svg t="1653309739816" class="rotate-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3230" width="28" height="28"><path d="M716.8 290.133333c-110.933333-102.4-281.6-106.666667-396.8-12.8S170.666667 537.6 247.466667 665.6c59.733333 106.666667 179.2 166.4 302.933333 149.333333s221.866667-102.4 256-221.866666c8.533333-34.133333 42.666667-51.2 76.8-42.666667 34.133333 8.533333 51.2 42.666667 42.666667 76.8-68.266667 226.133333-302.933333 354.133333-524.8 290.133333C174.933333 853.333333 42.666667 618.666667 106.666667 392.533333c42.666667-145.066667 153.6-256 298.666666-298.666666s298.666667 0 405.333334 102.4l81.066666-81.066667c8.533333-8.533333 21.333333-12.8 34.133334-8.533333 4.266667 12.8 12.8 21.333333 12.8 34.133333v264.533333c0 17.066667-12.8 29.866667-29.866667 29.866667h-260.266667c-12.8 0-25.6-8.533333-29.866666-17.066667s0-25.6 8.533333-34.133333l89.6-93.866667zM512 601.6c-46.933333 0-85.333333-38.4-85.333333-89.6s38.4-89.6 85.333333-89.6 85.333333 38.4 85.333333 89.6-38.4 89.6-85.333333 89.6z" p-id="3231"></path></svg>
      </div>

      <div class="scale" @click="scale_button" title="复原相机位置">
        <div class="scale-bg"></div>
        <svg class="scale-svg" t="1649666738421" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4069" width="22" height="22"><path d="M934 296l-111.5 49.6c-10.6 4.7-22.5-3-22.5-14.6v-75c0-35.4-28.7-64-64-64H64c-35.3 0-64 28.6-64 64v512c0 35.3 28.7 64 64 64h672c35.3 0 64-28.7 64-64v-74.9c0-11.6 11.9-19.3 22.5-14.6L934 728c42.3 18.8 90-12.2 90-58.5v-315c0-46.3-47.7-77.3-90-58.5zM503.9 553.6L340.5 648c-7.7 4.5-15.9 6.5-23.9 6.5-25.1 0-48.1-20-48.1-48.1V417.6c0-28 23-48.1 48.1-48.1 8 0 16.2 2 23.9 6.5l163.4 94.4c32 18.5 32 64.7 0 83.2z" p-id="4070"></path><path d="M447.9 512l-115.5 66.6V445.3z" p-id="4071"></path></svg>
      </div>
    </div>

    <!-- 结束一周，最上层遮罩 -->
    <transition name="layerTs">
      <div class="layer" v-if="progress == 'startLayer'" @click="start_day"></div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue'
import VueEvent from '../../../common/event';

import popMessage from '../../../components/common/pop_message/pop_message.vue';

const tip = ref('疫情模拟开始，我是指挥助手小守。请点击左下角按钮，模拟疫情上报。'); // 提示框信息
const progress = ref('beforeDeploy'); // 现在游戏的状态
// const progress = ref('beforeAllocation'); // 现在游戏的状态 TODO
const isPause = ref(true); // 判断是否暂停 / 是否有动画正在进行
const isTipShow = ref(true); // 判断是否隐藏提示框
const redLevel = ref([]); // 存储红色地区临时数据
var getAllocation = ref(10); // 临时存储获得物资数量

const props = defineProps({ // eslint-disable-line no-unused-vars
  material: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['finalAllocation'])

// 初始化动画
setTimeout(() => {
  isPause.value = false;
}, 2000)

/**
 * 计算属性相关
 */
const itemName = computed(() => {
  return (value) => {
    if(value == '13') return '居民楼B';
    else if(value == '42') return '居民楼A';
    else if(value == '44') return '工厂';
    else if(value == '核酸检测点' || value == '医院' || value == '物资点') return value;
    else return value + '号地区';
  }
})

const allAllocation = computed(() => {
  let count = 0;
  redLevel.value.forEach((item) => {
    count += item.size;
  })
  return count + '份';
})

/**
 * 函数相关
 */
const startAllocation = () => {
  // 计算每日物资分配量
  for(let item of redLevel.value) {
    if(item.name == '医院') item.size = 5;
    else item.size = Math.floor(Math.random() * 3 + 3);
  }
}

const finalAllocation = (value) => {
  // 结算每日资源分配
  let count = 0;
  value.forEach((item) => {
    count += item.size;
  })
  emit('finalAllocation', count, 0); // 通知父组件更改物资量
}

const next_allocation_button = () => {
  // 开始结算，进入下一步界面
  progress.value = 'nextAllocation';
  finalAllocation(redLevel.value);
}

const after_allocation_button = () => {
  // 结算完毕
  isPause.value = false;
  tip.value = '最后记得对封锁区域进行核酸检测，确认检测结果之后，方可结束本周。'
  progress.value = 'afterAllocation';
}

const after_Test_button = () => {
  tip.value = '小守的陪伴就先到这里，后续请自由探索吧！'
  progress.value = 'endDay';
}

const end_day = () => {
  // 结束本周
  progress.value = 'startLayer';
  isTipShow.value = false; // 隐藏提示框 TODO：后续丰富了功能，这里要判断是不是第一周
}

const start_day = () => {
  progress.value = 'beforeGetAllocation';

  // 先随机获取物资量
  getAllocation.value = Math.floor(Math.random() * 10 + 10);
  emit('finalAllocation', -getAllocation.value, 1); // 通知父组件更改物资量

  // 通知 game_table 将每个红色地区时间 +1
  VueEvent.emit('changeRedlevel');
}

const before_get_allocation_button = () => {
  progress.value = 'beforeDeploy';
}

/**
 * 左下角游戏功能按钮
 */
const deploy_button = () => {
  // 上报疫情事件
  tip.value = '请在白色区域中选择爆发点，并点击左下角的确定按钮。'
  progress.value = 'nowDeploy';
  VueEvent.emit('changeDeploy');
}

const click_button = () => {
  // 确认选择事件
  tip.value = '患者已送往医院，周边地区封锁。进点击左下角按钮，为封锁区域分配物资。'
  progress.value = 'afterDeploy';
  VueEvent.emit('clickDeploy');
}

const before_allocation_button = () => {
  // 物资分配，弹出分配统计窗
  isPause.value = true;
  progress.value = 'beforeAllocation';
}

const start_test = () => {
  progress.value = 'afterTest';
  VueEvent.emit('startTest');
}

/**
 * 右下角场景功能按钮
 */
const rotate_button = () => {
  VueEvent.emit('rotateBtn');
}

const scale_button = () => {
  VueEvent.emit('scaleBtn');
}

/**
 * three_scene 发来的事件
 */
VueEvent.on('pauseStart', () => {
  isPause.value = true;
})

VueEvent.on('pauseFinish', () => {
  isPause.value = false;
})

/**
 * game_table 发来的事件
 */
VueEvent.on('updateRedlevel', (value) => {
  // 接收 redLevel 数据，并存储在本组件中，随机出物资分配量
  redLevel.value = value;
  startAllocation();
})
</script>

<style scoped>
  /* 提示框 */
  .scene-tips {
    width: 260px;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-radius: 20px;

    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 30px;
    text-indent: 2em; /* 首行缩进 */
    text-align: justify; /* 两端对齐 */

    position: absolute;
    top: 180px;
    left: 200px;
    z-index: 10;
    /* background-color: #666; */
  }

  .scene-tips .scene-tips-icon {
    position: absolute;
    top: -16px;
    left: 110px;
  }

  .sceneTipsTs-enter-active, .sceneTipsTs-leave-active {
    transition: 1s ease;
  }

  .sceneTipsTs-enter-from, .sceneTipsTs-leave-to {
    opacity: 0;
  }

  .sceneTipsTs-enter-from-to, .sceneTipsTsTs-leave {
    opacity: 1;
  }

  .allocation-main, .test-main {
    width: 1200px;
    height: 680px;
    margin: 36px auto 0;
  }

  .main-title {
    width: 100%;
    height: 90px;
    color: #eeeeee;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: 10px;
    text-align: center;
  }

  .main-item {
    width: 360px;
    height: 240px;
    margin: 0 20px 20px;
    border-radius: 20px;
    color: #2c3e50;
    background-color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    overflow: hidden;
  }

  .item-name {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 20px;
  }

  .item-time {
    font-size: 16px;
    font-weight: 600;
    margin: 30px 50px 0 20px;
  }

  .item-size {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 50px 0 20px;
  }

  .item-button {
    width: 100px;
    height: 40px;
    border: 1px solid #eeeeee;
    border-radius: 20px;

    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 40px;

    position: absolute;
    right: 40px;
    bottom: 20px;
    cursor: pointer;
    transition: 0.4s;
  }

  .item-button:hover {
    background-color: #2c3e50;
  }

  .scene-button-lb {
    width: 180px;
    height: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
  }

  .scene-button-lb button {
    width: auto;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #eeeeee;
    border-radius: 20px;

    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 40px;

    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    transition: 0.4s;
    background-color: transparent;
  }

  .scene-button-lb button:hover {
    background-color: #2c3e50;
  }

  .scene-button-rb {
    width: 160px;
    height: 160px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    fill: currentColor; /* 让 color 属性可以改变 svg 的颜色 */
  }

  .rotate, .scale {
    width: 38px;
    height: 38px;
    border: 2px solid #666;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50px;
    color: #666;
    cursor: pointer;
    transition: .4s ;
  }

  .scale {
    top: 60px;
  }

  .rotate-bg, .scale-bg {
    width: 0;
    height: 0;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .2s;
  }

  .scene-button-rb svg {
    display: block;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  .rotate:hover, .scale:hover {
    color: #fff;
    border: 2px solid transparent;
  }

  .rotate:hover .rotate-svg {
    width: 30px;
    height: 30px;
  }

  .scale:hover .scale-svg {
    width: 24px;
    height: 24px;
  }

  .rotate:hover .rotate-bg, .scale:hover .scale-bg {
    width: 40px;
    height: 40px;
    background-color: #666;
  }

  /* 遮罩层 */
  .layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
    background: rgba(0, 0, 0, 1);
  }

  .layerTs-enter-active, .layerTs-leave-active {
    transition: 2s ease;
  }

  .layerTs-enter-from, .layerTs-leave-to {
    background: rgba(0, 0, 0, 0);
  }

  .layerTs-enter-from-to, .layerTs-leave {
    background: rgba(0, 0, 0, 1);
  }
</style>